<template>
  <div class="je-plugin-proposal">
    <el-tooltip
      class="item"
      effect="dark"
      content="我要吐槽"
      placement="top-end"
    >
      <i
        @click.stop.prevent="showDialog = true"
        class="desktop-icon jeicon jeicon-expression"
      />
    </el-tooltip>
    <el-dialog
      :visible.sync="showDialog"
      :before-close="cancel"
      :modal-append-to-body="false"
      :close-on-press-escape="false"
      title="我要吐槽"
      class="je-plugin-proposal-dialog"
      width="50%"
      @opened="opened()"
    >
      <div class="el-dialog__body-inner">
        <div
          :style="{ 'max-height': `${dialogMaxHeight}px` }"
          class="proposal-content"
        >
          <row :title="'吐槽标题'">
            <el-input
              slot="content"
              v-model="formData.PROPOSAL_CDBT"
              :clearable="true"
              :show-word-limit="true"
              :maxlength="200"
              placeholder="写下你的吐槽，直接粘贴或者上传产品问题截图有助于我们了解你的疑惑哦～"
            />
          </row>
          <row :title="'吐槽模块'">
            <div
              slot="content"
              class="module-list-wrp"
            >
              <p
                v-show="!formData.PROPOSAL_MK"
                class="module-placeholder"
              >
                请选择吐槽的模块
              </p>
              <div
                v-show="formData.PROPOSAL_MK"
                class="module-items"
              >
                {{ utilShowText(formData.PROPOSAL_MK, 10) }}
                <i class="jeicon jeicon-error-circle del" @click.stop.prevent="formData.PROPOSAL_MK = ''" />
              </div>
              <div class="chooseModule">
                <span
                  @click.stop.prevent="showModuleList()"
                  class="more"
                >
                  更多
                  <i :class="`jeicon jeicon-angle-right ${showModuleListWrp?'active':''}`" />
                </span>
                <el-collapse-transition>
                  <div v-show="showModuleListWrp">
                    <div class="wrpScroll" :style="{ 'height': `${dialogMaxHeight * 0.4}px` }">
                      <div class="innerScroll">
                        <div
                          v-for="(item, index) in moduleList"
                          :key="index"
                          @click.stop.prevent="handleModule(item.HOME_BT)"
                          :class="`${ formData.PROPOSAL_MK == item.HOME_BT ? 'active' : '' }`"
                        >
                          {{ utilShowText(item.HOME_BT, 5) }}
                        </div>
                      </div>
                    </div>
                  </div>
                </el-collapse-transition>
              </div>
            </div>
          </row>
          <p class="editor-label">
            尽量详细描述问题信息 例如：“进行删除数据时，没有弹窗提示的bug”
            <el-tooltip
              class="item"
              effect="dark"
              content="窗口查看"
              placement="top"
            >
              <i
                class="fullscreen fa fa-clone"
                @click.stop.prevent="openFsEditor()"
              />
            </el-tooltip>
          </p>
          <el-input
            type="textarea"
            class="editorbox"
            resize="none"
            v-model="formData.PROPOSAL_NR"
          />
          <!-- <div
            id="editorbox"
            ref="editorbox"
            class="editorbox"
          /> -->
          <div class="upload-wrp">
            <p class="upload-alert">
              <span @click="upload()">+上传附件：</span> 上传格式要求：最多支持上传6个文件，大小30MB
            </p>
            <div
              v-show="fileList.length > 0"
              class="upload-items-wrp"
            >
              <div
                v-for="(item, index) in fileList"
                :key="index"
                class="upload_items"
              >
                <downloadItem :data="item" />
                <i
                  @click="del(index)"
                  class="del jeicon jeicon-new-fine-plus-circle"
                />
              </div>
            </div>
          </div>
        </div>
        <el-row class="bottom-btns">
          <el-col
            :span="4"
            :offset="8"
          >
            <span
              @click.stop.prevent="submit"
              class="ownerBtn submit"
            >提交</span>
          </el-col>
          <el-col :span="4">
            <span
              @click.stop.prevent="cancel"
              class="ownerBtn cancel"
            >关闭</span>
          </el-col>
        </el-row>
      </div>
      <full-screen-dialog
        :visible="fullScreen"
        :value="formData.PROPOSAL_NR"
        @ok="finishInput"
        @cancel="closeFull"
      />
    </el-dialog>
  </div>
</template>

<script>
import row from './components/row';
import downloadItem from '../home/components/downloadItem';
import fullScreenDialog from './components/fullScreen';

export default {
  name: 'Proposal',
  components: { row, downloadItem, fullScreenDialog },
  data() {
    return {
      showDialog: false,
      formData: {
        PROPOSAL_MK: '',
        PROPOSAL_NR: '',
      },
      fileList: [],
      moduleList: [],
      swiperList: [],
      showModuleListWrp: false,
      userInfo: JE.getCurrentUser(),
      UEditor: null,
      fullScreen: false,
    };
  },
  watch: {
    fullScreen(nv) {
      if (nv) {
        JE.setWestMenuVisible(false);
      } else {
        JE.setWestMenuVisible(true);
      }
    },
  },
  computed: {
    dialogMaxHeight() {
      const { offsetHeight } = document.body;
      return offsetHeight * 0.6 - 54;
    },
    utilShowText() {
      return function(t, num) {
        const text = t || '';
        if (text.length > num) {
          return text.substring(0, num) + '...';
        }
        return text;
      }
    },
  },
  mounted() {
    this.loadModule();
  },
  methods: {
    loadModule() {
      const res = JE.ajax({
        url: '/je/portal/homeIndex/load',
        params: {
          tableCode: 'JE_CORE_HOME',
          limit: -1,
          orderSql: 'order by sy_orderindex'}
      });
      this.moduleList = res.rows;
    },
    opened() {
      // this.initEditor();
    },
    // 初始化富文本
    initEditor() {
      // 富文本编辑器
      const editorCfg = {
        autoHeightEnabled: false,
        enableAutoSave: false,
        allowDivTransToP: false, // 阻止div标签自动转换为p标签
        toolbars: [[
          'undo', 'redo', '|',
          'bold', 'italic', 'underline', 'forecolor', 'backcolor', 'fontfamily', 'fontsize', '|',
          'insertorderedlist', 'insertunorderedlist', '|',
          'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify',
        ]],
        // 关闭字数统计
        wordCount: false,
        maximumWords: 100000000000000,
        // 关闭elementPath
        elementPathEnabled: false,
      };
      this.UEditor = UE.getEditor('editorbox', editorCfg);
      // 内容改变
      // this.UEditor.addListener('contentChange', () => {
      //   this.formData.PROPOSAL_NR = this.UEditor.getContent();
      // });
    },
    // 显示模块列表
    showModuleList() {
      this.showModuleListWrp = !this.showModuleListWrp;
    },
    // 选择模块
    handleModule(item) {
      this.showModuleListWrp = false;
      this.$set(this.formData, 'PROPOSAL_MK', item);
      // this.formData.PROPOSAL_MK = item;
    },
    // 上传附件
    upload() {
      if (this.fileList.length > 5) {
        return JE.msg('已达到最大上传个数，请删除后在进行上传');
      }
      const vm = this;
      JE.uploadFile({
        multiSelect: true,
        fileCount: 6 - vm.fileList.length,
        width: '800px',
        height: '600px',
        // fileSize: '30',
        uploadFileType: 'func',
        post_params: { uploadType: 'OTHER' },
        callback(file) {
          const obj = {
            name: file.name,
            path: file.url,
          };
          vm.fileList.push(obj);
          document.querySelector('.proposal-content').scrollTop = document.querySelector('.upload-items-wrp').offsetHeight + 80;
        },
      });
    },
    // 删除
    del(index) {
      this.fileList.splice(index, 1);
    },
    // 提交按钮
    submit() {
      // this.formData.PROPOSAL_NR = this.UEditor.getContent();
      if (!this.formData.PROPOSAL_CDBT.trim()) {
        return JE.msg('未填写槽点标题哦');
      }
      if (!this.formData.PROPOSAL_NR.trim()) {
        return JE.msg('未填写正文内容哦');
      }
      this.formData.PROPOSAL_FJ = JE.encode(this.fileList);
      let params = {
        tableCode: 'PROPOSAL',
        funcCode: 'PROPOSAL',
        PROPOSAL_URL: window.location.href,
        PROPOSAL_LLQLX: this.checkBrowser(),
      };
      params = Object.assign({}, this.formData, params);
      const obj = JE.ajax({
        url: '/je/product/tucao/abreact',
        params,
      });
      if (obj.success) {
        JE.msg('吐槽成功');
        this.cancel();
      }
    },
    // 关闭
    cancel() {
      this.formData = {};
      this.fileList = [];
      this.showModuleListWrp = false;
      // this.UEditor.setContent('');
      // this.UEditor.destroy();
      this.showDialog = false;
    },
    // 获取浏览器版本信息
    checkBrowser() {
      const ua = navigator.userAgent.toLocaleLowerCase();
      let browserType = '';
      let browserVersion = '';
      if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
        browserType = 'IE';
        browserVersion = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] : ua.match(/rv:([\d.]+)/)[1];
      } else if (ua.match(/firefox/) != null) {
        browserType = 'Firefox';
        const regsafariVersion = /(?:firefox\/)(\d+)(?:\.)/i;
        const v = regsafariVersion.exec(ua);
        browserVersion = v[v.length - 1]
      } else if (ua.match(/ubrowser/) != null) {
        browserType = 'UC';
        const regsafariVersion = /(?:ubrowser\/)(\d+)(?:\.)/i;
        const v = regsafariVersion.exec(ua);
        browserVersion = v[v.length - 1];
      } else if (ua.match(/edge/) != null) {
        browserType = 'Edge';
        const regsafariVersion = /(?:edge\/)(\d+)(?:\.)/i;
        const v = regsafariVersion.exec(ua);
        browserVersion = v[v.length - 1];
      } else if (ua.match(/opr/) != null) {
        browserType = 'Opera';
        const regsafariVersion = /(?:opr\/)(\d+)(?:\.)/i;
        const v = regsafariVersion.exec(ua);
        browserVersion = v[v.length - 1];
      } else if (ua.match(/metasr/) != null) {
        browserType = 'Sougou';
        const startIndex = ua.indexOf('metasr');
        browserVersion = ua.substring(startIndex + 6);
      } else if (
        ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null
      ) {
        browserType = 'QQ';
        const startIndex = ua.indexOf('qqbrowse');
        browserVersion = ua.substring(startIndex + 10);
      } else if (ua.match(/maxthon/) != null) {
        browserType = '遨游';
        const startIndex = ua.indexOf('maxthon');
        browserVersion = ua.substring(startIndex + 8);
      } else if (ua.match(/chrome/) != null) {
        const is360 = _mime('type', 'application/vnd.chromium.remoting-viewer');
        function _mime (option, value) {
          const mimeTypes = navigator.mimeTypes
          for (let mt in mimeTypes) {
            if (mimeTypes[mt][option] == value) {
              return true
            }
          }
          return false
        }
        if (is360) {
          browserType = '360';
        } else {
          browserType = 'Google';
        }
        const regChromeVersion = /(?:chrome\/)(\d+)(?:\.)/i
        const v = regChromeVersion.exec(ua)
        browserVersion = v[v.length - 1]
      } else if (ua.match(/safari/) != null) {
        browserType = 'Safari';
        if (ua.indexOf('version') > 0) {
          const startIndex = ua.indexOf('version');
          const endIndex = ua.indexOf('safari');
          browserVersion = ua.substring(startIndex + 6, endIndex);
        } else {
          const startIndex = ua.indexOf('safari');
          browserVersion = ua.substring(startIndex + 6);
        }
      } else {
        browserType = '非主流browser';
      }

      return `${browserType} ${browserVersion}`;
    },
    // 打开全屏
    openFsEditor() {
      this.fullScreen = true;
      // this.$refs.fsEditor.fullscreenVisible = true;
    },
    // 全屏编辑结束
    finishInput(val) {
      this.$set(this.formData, 'PROPOSAL_NR', val);
      this.closeFull();
      // this.UEditor.setContent(cnt);
    },
    closeFull() {
      this.fullScreen = false;
    },
  },
};
</script>

<style lang="less">
  .je-plugin-proposal {
    position: fixed;
    right: 30px;
    bottom: 60px;
    z-index: 999;
    .desktop-icon {
      color: #1890FF;
      font-size: 30px;
      cursor: pointer;
    }
    .je-plugin-proposal-dialog {
      .el-dialog__body {
        padding-top: 0;
        padding-bottom: 70px;
        &:-webkit-scrollbar{
          display: none;
          width: 0;
          height: 0;
        }
      }
      .el-dialog__body-inner {
        .proposal-content {
          overflow-y: scroll;
          scrollbar-width: none;
          &:-webkit-scrollbar{
            display: none;
            width: 0;
            height: 0;
          }
          .el-input {
            > .el-input__inner {
              padding-left: 5px;
              border: 0;
              padding-right: 80px;
              &::-webkit-input-placeholder {
                color: #BEBEBE !important;
                font-size: 13px;
              }
              &::-moz-placeholder {
                color: #BEBEBE !important;
                opacity: 1 !important;
                font-size: 13px;
              }
              &::-ms-input-placeholder {
                color: #BEBEBE !important;
                font-size: 13px;
              }
            }
          }
          .module-list-wrp {
            height: 40px;
            position: relative;
            .module-placeholder {
              padding-left: 5px;
              font-size: 13px;
              color: #BEBEBE;
            }
            .module-items {
              background: #ededed;
              border-radius: 4px;
              padding: 4px 25px;
              color: #3f3f3f;
              font-size: 13px;
              // cursor: pointer;
              float: left;
              line-height: normal;
              position: relative;
              top: 7px;
              > .del {
                position: absolute;
                top: -5px;
                right: -5px;
                font-size: 12px;
                cursor: pointer;
              }
            }
            .chooseModule {
              position: absolute;
              top: 0;
              right: 10px;
              z-index: 1000;
              > .more {
                cursor: pointer;
                font-size: 14px;
                color: #3f3f3f;
                > i {
                  transition: all 300ms;
                  transform: rotate(90deg);
                  font-size: 13px;
                  display: inline-block;
                  position: relative;
                  top: -1px;
                  &.active {
                    transform: rotate(-90deg);
                  }
                }
              }
              .wrpScroll {
                overflow: hidden;
                position: absolute;
                border: 1px solid #f5f5f5;
                top: 35px;
                right: 0;
                background: #ffffff;
                box-shadow:0px 0px 5px 0px rgba(0,0,0,0.24);
                z-index: 2;
                width: 470px;
                padding: 10px 0;
                > .innerScroll {
                  overflow-y: scroll;
                  // display: flex;
                  // flex-wrap: wrap;
                  // justify-content: flex-start;
                  padding: 0 40px 0 20px;
                  // width: 490px;
                  width: 505px;
                  height: 100%;
                  > div {
                    margin-top: 10px;
                    background: #ededed;
                    border-radius: 4px;
                    padding: 4px 0;
                    color: #3f3f3f;
                    font-size: 13px;
                    cursor: pointer;
                    line-height: normal;
                    width: 130px;
                    text-align: center;
                    margin-left: 19px;
                    float: left;
                    &:nth-child(3n-2) {
                      margin-left: 0;
                    }
                    &.active {
                      background: #386BD0 !important;
                      color: #ffffff;
                    }
                    &:hover {
                      background: #D8D8D8;
                    }
                  }
                  &:after {
                    content: '';
                    clear: both;
                    display: table;
                  }
                }
              }
            }
            &:after {
              content: '';
              display: table;
              clear: both;
            }
          }
          .editor-label {
            margin-top: 30px;
            font-size: 12px;
            color: #BEBEBE;
            .fullscreen {
              cursor: pointer;
              margin-left: 5px;
              font-size: 12px;
            }
          }
          .editorbox {
            margin-top: 10px;
            height: 200px;
            // width: 100%;
            width: calc(100% - 2px);
            box-sizing: border-box;
            > textarea {
              height: 200px;
            }
          }
          .upload-wrp {
            margin-top: 40px;
            .upload-alert {
              color: #BEBEBE;
              font-size: 12px;
              > span {
                color: #386BD0;
                font-size: 13px;
                cursor: pointer;
              }
            }
            .upload-items-wrp {
              height: 80px;
              margin-top: 20px;
              .upload_items {
                width: 70px;
                float: left;
                cursor: pointer;
                position: relative;
                &:not(:first-child) {
                  margin-left: 10px;
                }
                .del {
                  position: absolute;
                  top: 0;
                  right: 0;
                  font-size: 11px;
                  transform: rotate(45deg);
                  color: red;
                }
              }
              &:after {
                content: '';
                display: table;
                clear: both;
              }
            }
          }
        }
        .bottom-btns {
          position: absolute;
          right: 0;
          bottom: 20px;
          left: 0;
          .ownerBtn {
            width: 88px;
            height: 28px;
            line-height: 28px;
            border-radius: 4px;
            text-align: center;
            cursor: pointer;
            border: 1px solid transparent;
            font-size: 14px;
            display: block;
            &.submit {
              background: #386BD0;
              color: #ffffff;
              border-color: #386BD0;
            }
            &.cancel {
              background: #f4f4f4;
              border-color: #dddddd;
              color: #444444;
            }
          }
        }
      }
    }
  }
</style>
